<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>13.捕获事件</title>
</head>

<body>
    <div class="parent">
        <div class="child">
            <button class="btn">点击</button>
        </div>
    </div>
    <script>
        /*
         *捕获事件：
         * 1.addEventListener(事件名,函数,是否冒泡)：第三个参数为true，即为冒泡事件
         * 2.捕获事件是从父元素向子元素传递
         * 3.只有addEventListener可以传递捕获事件
         * */
        var btn = document.querySelector(".btn");
        var child = document.querySelector(".child");
        var parent = document.querySelector(".parent");
        var body = document.querySelector("body");
        var html = document.querySelector("html");
        btn.addEventListener("click", function(event) {
            console.log("btn");
            //在这里设置一个属性，在下面检查event是否是同一个事件对象
            event.bubble = "maopao";
        },true)
        child.addEventListener("click", function(event) {
            console.log("child");
            //在这里打印事件对象，在target属性能看到冒泡事件
            console.log(event.bubble);//undefined
        },true)
        parent.addEventListener("click", function(event) {
            console.log("parent");
        },true)
        body.addEventListener("click", function(event) {
            console.log("body");
            //event.bubble = "maopao";
        },true)
        html.addEventListener("click", function(event) {
            console.log("html");
        },true)
    </script>
</body>

</html>